<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>查看试卷 - 智能教育系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            margin: 0;
            padding-top: 80px;
        }

        .view-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
        }

        .exam-info {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .exam-image {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            text-align: center;
        }

        .exam-image img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(110, 142, 251, 0.3);
        }

        .score-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-weight: 600;
        }

        .score-excellent {
            background-color: #dcfce7;
            color: #166534;
        }

        .score-good {
            background-color: #dbeafe;
            color: #1e40af;
        }

        .score-fair {
            background-color: #fef3c7;
            color: #92400e;
        }

        .score-poor {
            background-color: #fee2e2;
            color: #991b1b;
        }
    </style>
</head>
<body>
    <!-- 引入导航栏 -->
    <div th:replace="fragments/navbar :: navbar"></div>

    <div class="view-container">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-800">查看试卷</h1>
            <a th:href="@{/exam/detail/{id}(id=${record.exam.id})}" class="text-blue-600 hover:text-blue-800">
                返回考试详情
            </a>
        </div>

        <!-- 考试信息 -->
        <div class="exam-info">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h2 class="text-2xl font-bold text-gray-800 mb-4" th:text="${record.exam.examName}"></h2>
                    <p class="text-gray-600 mb-2" th:text="${'科目：' + record.exam.subject}"></p>
                    <p class="text-gray-600 mb-2" th:text="${'考试日期：' + #temporals.format(record.exam.examDate, 'yyyy-MM-dd HH:mm')}"></p>
                    <p class="text-gray-600" th:text="${'班级：' + record.exam.class.className + ' (' + record.exam.class.grade + ')'}"></p>
                </div>
                <div class="flex flex-col justify-center">
                    <div class="text-center">
                        <p class="text-4xl font-bold text-gray-800 mb-2" th:text="${record.studentName}"></p>
                        <p class="text-gray-600">学生姓名</p>
                        <div th:if="${record.score != null}" 
                             class="mt-4"
                             th:class="${'score-badge ' + 
                                (record.score >= 90 ? 'score-excellent' : 
                                 record.score >= 80 ? 'score-good' : 
                                 record.score >= 60 ? 'score-fair' : 'score-poor')}">
                            <span th:text="${record.score + '分'}"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 试卷图片 -->
        <div class="exam-image">
            <img th:src="@{${record.imagePath}}" alt="试卷图片">
        </div>

        <!-- 评语 -->
        <div th:if="${record.comments != null}" class="mt-6">
            <h3 class="text-xl font-bold text-gray-800 mb-2">评语</h3>
            <div class="bg-white rounded-lg p-4 shadow">
                <p class="text-gray-700" th:text="${record.comments}"></p>
            </div>
        </div>
    </div>
</body>
</html> 